(function(){
    function makeBanner(file,banner) {
        var jsonData = null;//ajax请求得到的一个数组
        var $banner = $(banner);
        var $images = $('img',$banner);
        var index = 0;
        var $oliList =$('#oliList>li',$banner);//li标签
        var olistep = -1;
        var isFirst = true;
        //获得数据并给img设置src
        function getAjax() {
            $.ajax({
                type: 'get',
                url: file,
                dataType: 'json',
                async: false,
                success: function (msg) {
                    jsonData = msg;
    
    
                }
            })
            $images.each(function (i) {
    
                $(this).attr('src', jsonData[i].src);
    
            });
        }
        getAjax();
    
        //图片延迟加载
        var timer = window.setTimeout(lazyImg, 1000);
        function lazyImg() {
            $images.each(function (i) {
                if (i == 0) {
                    $(this).animate({
                        display: 'block',
                        zIndex: 1,
                        opacity: 1
                    })
                    window.clearTimeout(timer);
                }
    
            });
            $('.bk').css('background', 'url()');
        };
        //图片依次显示
    
        var timer1 = window.setInterval(autoMove, 1000);
        function autoMove() {
            console.log(index);
            if (index >= 3) {
                index = 0;
            } else {
                //先确定index的值        
                $images.each(function (i) {
                    if ($(this).css('opacity') == '1') {
                        index = i + 1;
                        return;
                    }
    
    
                })
            }
    
            //若i不等于index则清空图片的zindex和opacity样式
            $images.each(function (i) {
                if (i != index) {
                    $(this).css({
                        display: 'none',
                        zIndex: 0,
                        opacity: 0
                    })
                }
    
            })
            //给i等于index的图片设值zindex=‘1’，opacity= ‘1’
            $images.each(function (i) {
    
                if (i == index) {
                    $(this).css('display', 'block');
                    $(this).animate({
    
                        zIndex: '1',
                        opacity: '1'
                    }, 500);
                }
    
            })
        }
    
        //li标签轮播
        var timer2 = window.setInterval(oliAutoMove, 1000);
        function oliAutoMove() {
            
            if (olistep == 3) {
                olistep = -1;
            }
            olistep++;
            $oliList.each(function (i) {
                if (i != olistep) {
                    $(this).attr('class', '');
                } else {
                    $(this).attr('class', 'active');
    
                }
            })
            
        }
    
        function move(index){
            
    
            //若i不等于index则清空图片的zindex和opacity样式
            $images.each(function (i) {
                if (i != index) {
                    $(this).css({
                        display: 'none',
                        zIndex: 0,
                        opacity: 0
                    })
                }
    
            })
            //给i等于index的图片设值zindex=‘1’，opacity= ‘1’
            $images.each(function (i) {
    
                if (i == index) {
                    $(this).css('display', 'block');
                    $(this).animate({
    
                        zIndex: '1',
                        opacity: '1'
                    }, 500);
                }
    
            })
        }
        //切换li标签
        function oliMove(olistep){
            $oliList.each(function (i) {
                if (i != olistep) {
                    $(this).attr('class', '');
                } else {
                    $(this).attr('class', 'active');
    
                }
            })
        }
        //左右a标签
        $('#banner').on('mousemove',function(){
            $('#left').css('display','block');
            window.clearInterval(timer1);
            window.clearInterval(timer2);
           
        }).on('click',function(){
            //img变换
            if(index == 0){
                index = jsonData.length/2;
            }
            index--;
            move(index);
            
            console.log(index,olistep);
            //li变换
            
            if(olistep == 0){
                olistep = jsonData.length/2;
            }
            olistep--;
            oliMove(olistep);
            
        }).on('mouseleave',function(){
            $('#left').css('display','none');
            timer1 = window.setInterval(autoMove, 1000);
            timer2 = window.setInterval(oliAutoMove, 1000);
            
        })
    
    
    
    
    
    }

    $.extend({
        makeBanner:makeBanner
    });

})();

